<template>用户名称
  <el-input v-model="form.userName" placeholder="请输入用户名称" clearable style="width: 300px;"/> &nbsp;
  <el-button type="primary" @click="GetAllUserInfo">查询</el-button>
  <div>
    <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" :index="indexMethod" label="编号" width="60" align="center" />
    <el-table-column prop="userName" label="用户名" />
    <el-table-column prop="userSex" label="性别" />
    <el-table-column prop="provinceName" label="所在省份" />
    <el-table-column prop="urbanName" label="所在市" />
    <el-table-column prop="countyName" label="所在县" />
    <el-table-column prop="userAddress" label="地址详情"  show-overflow-tooltip/>
    <el-table-column prop="addName" label="创建人" />
    <el-table-column prop="addTime" label="创建日期" width="138">
      <template v-slot="scope">
        <span>{{ (scope.row.addTime).substring(0,16) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateName" label="修改人" />
    <el-table-column prop="updateTime" label="修改日期" width="138">
      <template v-slot="scope">
        <span v-if="scope.row.updateTime!=null" >{{ (scope.row.updateTime).substring(0,16) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作"  width="120">
      <template v-slot="scope">
        <el-link type="warning" style="width: 40px;" @click="Update(scope.row.userId)">修改</el-link>
        <el-link type="danger" style="width: 40px;" @click="Del(scope.row.userId)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[5, 8 ,12]"
      prev-text="上一页"
      next-text="下一页"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.rootpcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';

onMounted(()=>{
  GetAllUserInfo()
})
const form=reactive({
  pageIndex:1,
  pageSize:5,
  rootpcount:0,
  Pcount:0,
  userName:''
})
const indexMethod=(index:number)=>{
  return index + 1
}
//用户列表
const tableData = ref([])
const GetAllUserInfo=()=>{
  axios.get('User/Show', {
    params:{
      pageIndex:form.pageIndex,
      pageSize:form.pageSize,
      userName:form.userName
    }
  }).then((ret) => {
    console.log(ret.data)
    tableData.value=ret.data.data.lists
    form.rootpcount=ret.data.data.listCount
    form.Pcount=ret.data.data.pageCount
  })
}
const handleSizeChange = (val: number) => {
  form.pageSize=val
  GetAllUserInfo()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  GetAllUserInfo()
}

import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router';

//删除
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Del=(row:any)=>{
  ElMessageBox.confirm(
    '确定删除吗？?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put('User/Delete?userId='+ row
      ).then((ret) => {
        console.log(ret.data)
        if(ret.data>0){
          ElMessage.success('删除成功')
          GetAllUserInfo()
        }else{
          ElMessage.error('删除失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消',
      })
    })
}
//修改
const Update=(userId:number)=>{
  router.push({
    path:'/UserInfoUpda',
    query:{
      userId:userId
    }
  })
}

</script>

<style scoped>

</style>